<template>
	<view class="content">
		<view class="top-content">
			<view class="top-1">
				<image class="left-icon" src="../../../static/ic_eshop.png" mode="aspectFit" />
				<a href="https://gitee.com/xiaozheng9845/uni-app" target="_blank">访问我的Gitee仓库</a>
				<image class="right-icon" src="../../../static/ic_scan.png" mode="aspectFit" />
			</view>
		</view>
		<view class="search" style="margin-top: 70rpx;">
			
			<image src="../../../static/ic_search.png" mode="" class="icon"></image>
			<input type="text" />
		</view>
		<TypeView></TypeView>
		<!-- <Banner></Banner> -->
		<view class="carousel_content">
		<swiper
		      class="carousel"
		      autoplay="true"   
		      interval="2000"    
		      circular="true"    
		      indicator-dots="true"> 
		      <swiper-item>
		        <image src="../../../static/ic_banner.png" class="slide-image" />
		      </swiper-item>
		      <swiper-item>
		        <image src="../../../static/ic_banner01.png" class="slide-image" />
		      </swiper-item>
		      <swiper-item>
		        <image src="../../../static/ic_banner02.png" class="slide-image" />
		      </swiper-item>
		      <swiper-item>
		        <image src="../../../static/ic_banner03.png" class="slide-image" />
		      </swiper-item>
			  <swiper-item>
			    <image src="../../../static/ic_banner04.png" class="slide-image" />
			  </swiper-item>
		    </swiper>
</view>
		<view class="middle_searchbar">
			<view v-for="(item,index) in type4" @click="typr4Click(index)">
				<text style="font-size: 30rpx;">{{item.title}}</text>
				<text :class="{active: index === type4Index}">{{item.sub_title}}</text>
			</view>
		</view>
<view class="prod_list">
    <view class="item" v-for="(item, index) in products" :key="item.id" @click="gotoDetail(item)">
      <!-- 使用 imageUrl 替换 pic -->
      <image :src="item.imageUrl" mode=""></image>
      <!-- 使用 name 替换 intro -->
      <text class="intro">{{ item.name }}</text>
      <!-- price 属性名相同，无需修改 -->
      <text class="price">￥{{ item.price }}</text>
      <!-- 使用 hot 替换 tag -->
      <text class="label">{{ item.hot }}</text>
    </view>
  </view>
	</view>
</template>

<script setup>
	// 导入，然后使用
	
	import {
		ref
	} from 'vue';
	// console.log("prodList", JSON.stringify(prodList));
	let type4Index = ref(0)
	const type4 = ref([{
			title: '全部',
			sub_title: '为你推荐'
		},
		{
			title: '精选',
			sub_title: '发现好货'
		},
		{
			title: '新品',
			sub_title: '新品首发'
		},
		{
			title: '实惠',
			sub_title: '便宜好货'
		}
	])
const products = ref([
  {
	id:1,
    name: '【XXX20e】XX 5000mAh 大电池6.3英寸高清大屏',
    price: 1899,
    imageUrl: '../../../static/product001.png',
	hot:'赠送积分'
  },
  {
	id:2,
    name: '【XXXXBook 13】 XX笔记本电脑XXXXBook 13...',
    price: 5199,
    imageUrl: '../../../static/product002.png',
	hot:'新品'
  },
  {
  	id:3,
    name: 'XXXXBook 13 笔记本电脑',
    price: 5199,
    imageUrl: '../../../static/product003.png',
	hot:'爆'
  },
  {
  	id:4,
    name: 'XXXXBook 13 笔记本电脑',
    price: 5199,
    imageUrl: '../../../static/product004.png',
	hot:'新人券'
  },
  {
  	id:5,
    name: 'XXXXBook 13 笔记本电脑',
    price: 5199,
    imageUrl: '../../../static/product005.png',
	hot:'会员优惠'
  },
  {
  	id:6,
    name: 'XXXXBook 13 笔记本电脑',
    price: 5199,
    imageUrl: '../../../static/product006.png',
	hot:'新品'
  },
  // 其他商品...
]);
	let typr4Click = (index) => {
		console.log("index", index);
		type4Index.value = index
	}
	
	let gotoDetail = (item) => {
		console.log("gotoDetail");
		uni.navigateTo({
			url: '/pages/tabBar/details/details?id=' + item.id
		})
	}
</script>

<style lang="scss">
	.carousel_content{
		margin-bottom: 300rpx;
	}
	.carousel{
		border-radius: 20px;
		  overflow: hidden; /* 隐藏超出部分 */
		  position: absolute;
		  margin-left: 2.5%;
		width: 100%; /* 轮播图宽度为页面的90% */
		height: 300rpx; /* 根据需要设置轮播图的高度 */

	  }
	  .slide-image {
		  border-radius: 20px;
	        width: 90%;
	        height: 100%;
	        object-fit: cover; /* 确保图片覆盖整个swiper-item容器 */
	      }
	.top-1{
		position: absolute;
		top: 0; /* 或者设置为具体数值，根据需要调整位置 */
		left: 0; /* 如果需要，可以设置左右偏移 */
		right: 0; /* 如果需要，可以设置右偏移 */
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px; /* 根据需要添加内边距 */
	}
	.left-icon,
	.right-icon {
	    width: 50rpx; /* 根据需要设置图标的宽度 */
	    height: 50rpx; /* 根据需要设置图标的高度 */
	  }
	/* 隐藏垂直滚动条 */
	::-webkit-scrollbar {
		width: 0;
	}

	/* 隐藏水平滚动条 */
	::-webkit-scrollbar {
		height: 0;
	}

	/* 隐藏滚动条的轨道 */
	::-webkit-scrollbar-track {
		background-color: rgba(0, 0, 0, 0);
	}

	/* 隐藏滚动条的滑块 */
	::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0);
	}

	// 定义一个变量
	$logo_size: 50rpx;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url("../../../static/ic_app_background.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #F1F3F5;
		// height: 800rpx;
		padding: 20rpx;

		&>* {
			width: 100%;
		}

		&>.top-content {
			display: flex;
			justify-content: space-between;

			&>image {
				// 使用变量
				width: $logo_size;
				height: $logo_size;
			}
		}

		&>.search {
			display: flex;
			background-color: white;
			margin-top: 20rpx;
			border-radius: 40rpx;
			padding: 10rpx;

			&>image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			&>input {
				flex: 1; // 将输入框的宽度拉伸
			}
		}

		&>.middle_searchbar {
			display: flex;
			height: 140rpx;
			font-weight: 600;

			&>view {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			& .active {
				color: red;
			}
		}

		&>.prod_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			&>.item {
				background-color: white;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				overflow: hidden;
				// flex: 1;
				width: 300rpx;
				padding: 20rpx;
				margin-top: 20rpx;

				&>image {
					width: 240rpx;
					height: 240rpx;
					align-self: center;
				}

				& .intro {
					font-size: 13px;
					font-weight: 600;
					// white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 100%;
				}

				& .price {
					font-weight: 600;
					font-size: 20px;
					color: deeppink;
				}

				& .label {
					background-color: #FD004B;
					color: white;
					font-size: 10px;
					padding: 10rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>